<template>
  <div class="">
    <CommonTitle class="m-t20" titleName="项目实施情况"> </CommonTitle>
    <div class="content d-flex m-t20">
      <div class="leftTree">
        <div class="title">项目实施阶段规划</div>
        <el-tree
          :data="dataTree.data"
          node-key="projectStageId"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <template #default="{ data }">
            <span class="custom-tree-node">
              <span
                v-if="state.projectStageId == data['projectStageId']"
                style="color: #fc7018"
                >{{ data.stageName }}</span
              >
              <span v-else>{{ data.stageName }}</span>

              <span v-if="state.data?.type==3 && tabId!=='1'">
                <span class="projectPeople" @click="append(data)">
                  进场人员
                </span>
              </span>
            </span>
          </template>
        </el-tree>
      </div>
      <div class="rightTab">
        <div class="title_top d-flex m-b20">
          项目名称： <span class="m-l10">{{ form?.projectName }}</span>
          <el-divider class="m-l10 m-r10" direction="vertical" />
          项目计划时间范围：
          <span class="m-l10"
            >{{ state.data?.predictStartTime }} 至 {{ state.data?.predictEndTime }}</span
          >
          <el-divider class="m-l10 m-r10" direction="vertical" />
          项目主责部门：<span class="m-l10"
            >{{ form?.responsibleDepartmentName }}
          </span>
          <el-divider class="m-l10 m-r10" direction="vertical" />
          项目责任人：<span class="m-l10">{{ form?.responsibleUserName }} </span>
        </div>

        <tableIndex
          :tableData="tableData"
          :tableHead="tableHead"
          :isIndex="true"
          :height="'500'"
          :page="state.page"
          :notSearch="true"
          :is-selection="false"
          @page-change="pageChange"
        >
        <template #focus="{ row }">
          <!-- <StarFilled
            v-if="row.focus == 1"
            style="width: 1.5em; height: 1.5em; color: #fc7018"
          /> -->
          <svg-icon
            v-if="row.focus == 1"
						icon-class="heart-active"
					/>
          <svg-icon v-else icon-class="heart" />
        </template>
          <template #operate v-if="tabId!=='1'">
            <el-table-column
              label="操作"
              width="200"
              fixed="right"
              align="center"
            >
              <template #default="{ row }">
                <el-button size="small" type="primary" @click="nodeHandler(row)"
                  >节点执行情况</el-button
                >
              </template>
            </el-table-column>
          </template>
        </tableIndex>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onBeforeMount, onMounted} from 'vue'
import TableIndex from '@/components/table/index.vue'
import CommonTitle from '@/components/CommonTitle.vue'
import { ElDivider } from 'element-plus'
import { projectTask, projectConfigApi } from '@/api/project.js'
import { useRoute, useRouter } from 'vue-router'
import { getURLhandler } from '@/views/constructionProjectManage/static/utools.js'

let router = useRouter()
let route = useRoute()
// const projectTaskId = getURLhandler(route.path).projectTaskId;
const props = defineProps({
  projectId: {
    type: String,
    default: ''
  },
  projectType: {
    type: String,
    default: ''
  },
  form: {
    type: Object,
    default: () => {}
  },
  tabId:{
      type:String,
      default: ''
  }
})
const state = reactive({
  projectStageId: '',
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  }
})
const tableHead = ref([
  {
    prop: "status",
    label: "状态",
    formatter: (row) => {
      let str = "";
			switch (row.status) {
				case -2:
					str = "待配置";
					break;
				case -1:
					str = "未完成";
					break;
				case 0:
					str = "进行中";
					break;
				case 1:
					str = "完成";
					break;
				default:
					break;
			}
			return str;
    }
  },
  {
    prop: 'focus',
    label: '重点关注',
    slot: 'focus'
  },
  {
    prop: 'taskName',
    label: '实施任务名称',
    width: 120,
  },
  {
    prop: 'projectTaskId',
    label: '任务编号'
  },
  {
    prop: 'planStartTime',
    label: '计划开始时间',
    width: 120,
  },
  {
    prop: 'planEndTime',
    label: '计划结束时间',
    width: 120,
  },
  {
    prop: 'workPeriod',
    label: '计划工期'
  },
  {
    prop: 'responsibleDepartmentName',
    label: '负责部门'
  },
  {
    prop: 'responsibleUserName',
    label: '责任人'
  },
  {
    prop: 'delayStatus',
    label: '是否预期 ',
    formatter: (row) => {
      return row.delayStatus == 1 ? '超期' : '未超期'
    }
  }
])
const tableData = ref([])
let dataTree = reactive([])
const pageChange = (e) => {
  state.page.page = e.page
  state.page.pageSize = e.limit
  getPageList()
}
const handleNodeClick = (data, node, treeNode, event) => {
  state.projectStageId = data.projectStageId
  getPageList()
}
const append = (data) => {
  router.push({
    path: `/constructionProjectManage/preliminaryProject/components/approachPeople/projectId=${props.projectId||getURLhandler(route.path).projectId}&projectStageId=${data.projectStageId}`
  })
}

// 节点执行情况
const nodeHandler = (row) => {
  router.push({
    path: `/constructionProjectManage/preliminaryProject/components/nodeCarry/projectId=${props.projectId||getURLhandler(route.path).projectId}&projectTaskId=${row.projectTaskId}`
  })
}

const getListPage = () => {
	let projectId=props.projectId||getURLhandler(route.path).projectId
  projectTask.getStageDetail(projectId || '').then((res) => {
    if (res.code === '200') {
      Object.assign(dataTree, {
        data: res.data.stageVo.stages
      })
      state.data = res.data;
      state.projectStageId = res.data.stageVo?.stages[0]?.projectStageId;
        console.log('state.projectStageId',state.projectStageId)
      if(state.projectStageId!=='' && state.projectStageId!==undefined){
          getPageList();
      }
    }
  })
}

//获取表格数据
const getPageList = (e) => {
  let obj = {
    pageNum: state.page.page,
    pageSize: state.page.pageSize,
    param: {
      projectId: props.projectId || getURLhandler(route.path).projectId||'',
      projectStageId: state.projectStageId || getURLhandler(route.path).projectStageId || '',
      isDark:getURLhandler(route.path).isDark==='2'?'1':'0'
    }
  }
  projectTask.getProjectTaskPage(obj).then((res) => {
    if (res.code === '200') {
      tableData.value = res.data.content
        state.page.total = res.data.totalSize;
    }
  })
}

onMounted(()=>{
    getListPage();
});
</script>
<style lang="scss" scoped>
.leftTree {
  width: 15%;
  // border: 1px solid #ccc;
  // min-height: 400px;

  .title {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 6px;
    font-size: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: bold;
    color: #1a1a1a;
    border: 1px solid #e3e7f1;
    margin-bottom: 10px;
  }
}
.rightTab {
  width: 83%;
  margin-left: 40px;
  .title_top {
    height: 14px;
    font-size: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 700;
    color: #1a1a1a;
  }
}
.projectPeople {
  color: #fff;
  cursor: pointer;

  text-align: center;
  font-size: 12px;
  height: 20px;

  line-height: 20px;
  margin-left: 20px;
  background-color: #d4ae85;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
</style>
